<template>
	<view class="tab-container">
		<view class="content">
			<view class="hand">
				<scroll-view scroll-x="true" class="scroll-class">
					<view class="dataInfo">
						<view class="dataList" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
							<view :class="tabIndex == index ? 'activite' : ''" class="name">
								{{item.label}}
							</view>
							<view :class="tabIndex == index ? 'active-line' : ''"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "baseTab",
		props: {
			tabList: {
				type: Array,
				default: () => [
					{
						label: "液压系统"
					},
					{
						label: "电子系统"
					},
					{
						label: "行走系统"
					}
				],
			},
			tabIndex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {};
		},
		methods: {
			changeTab(index) {
				this.$emit("changeTab", index);
			},
		},
	};
</script>

<style lang="less" scoped>
	.tab-container {
		position: fixed;
		/* 将选项卡固定在页面  预留80rpx给搜索框*/
		top: 80rpx;
		/* 距离顶部的距离，可以根据需要调整 */
		width: 100%;
		/* 使选项卡栏占据整个页面宽度 */
		background-color: #333;
		/* 选项卡栏的背景色 */
		z-index: 999;
		/* 可能需要调整层级，以确保在其他内容之上 */
	}

	.content {
		.hand {
			.dataInfo {
				display: flex;
				text-align: center;
				width: 100%;

				.dataList {

					// 默认标题的样式
					.name {
						font-size: 30rpx;
						color: #fff;
						display: block;
						line-height: 82rpx;
						min-width: 170rpx;
					}

					//导航选中状态标题的样式
					.name.activite {
						color: #ffb612;
						font-size: 35rpx;
					}

					// 选中状态的下划线样式
					.active-line {
						height: 6rpx;
						width: 170rpx;
						background: #ffb612;
						border-radius: 2rpx;
						margin: 0 auto;
					}
				}
			}
		}

		//
		.scroll-class {
			white-space: nowrap;
			border-bottom: 2rpx solid #e1e4e6;
		}
	}
</style>
